<!--  消息体
      msgBodyList: {
        type: Array,
        default: function() {
          return [
            {
              id: 1,
              person: 'Code Bender',
              avatar: 'https://cdn.quasar.dev/img/avatar.png',
              time: '15:00',
              sent: false,
              type: 'audio',
              sentDay: 'Sunday, 19th'
            },
            {
              id: 2,
              person: 'me',
              avatar: 'https://cdn.quasar.dev/team/dan_popescu.jpg',
              text: ['I\'m working on Quasar!'],
              time: '16:00',
              type: 'file',
              url: 'https://cdn.quasar.dev/img/avatar.png',
              fileName: '美女图.png',
              sent: true,
              sentDay: ''
            }, {
              id: 1,
              person: 'Code Bender',
              avatar: 'https://cdn.quasar.dev/img/avatar.png',
              text: ['I\'m working on Quasar!'],
              time: '15:00',
              sent: false,
              type: 'text',
              sentDay: 'Sunday, 19th'
            },
            {
              id: 2,
              person: 'me',
              avatar: 'https://cdn.quasar.dev/team/dan_popescu.jpg',
              text: [' [:p] I\'m working on Quasar!'],
              time: '16:00',
              sent: true,
              type: 'text',
              sentDay: ''
            }, {
              id: 1,
              person: 'Code Bender',
              avatar: 'https://cdn.quasar.dev/img/avatar.png',
              text: ['I\'m working on Quasar!'],
              time: '15:00',
              sent: false,
              type: 'video',
              sentDay: ''
            },
            {
              id: 2,
              person: 'me',
              avatar: 'https://cdn.quasar.dev/team/dan_popescu.jpg',
              text: ['I\'m working on Quasar!'],
              time: '16:00',
              sent: true,
              sentDay: '',
              url: 'https://placeimg.com/500/300/nature',
              type: 'img',
              sending: true
            }
          ]
        }
      }-->

<template>
    <div iclass="listClass">
        <q-virtual-scroll
                ref="msgListRef"
                class="listClass"
                component="q-list"
                :items="msg">
            <template v-slot="{ item, index }" class="heAndWi">
                <q-item
                        :key="index"
                        class="heAndWi">
                    <div class="row heAndWi">
                        <div v-if="item.from == getUserInfo.userId" class="col-6">
                        </div>
                        <div id="msg-text" class="col-6" style="max-width: 50%">
                            <q-chat-message
                                    v-if="item.msgType === -1"
                                    class="text-grey"
                                    :class="item.from == getUserInfo.userId?'float-left':'float-right'"
                                    :label="item.createTime"

                            />


                            <!--                //"消息类型int类型(0:text、1:image、2:voice、3:video、4:music、5:news、6:file)"-->
                            <q-chat-message
                                    v-else
                                    class="justify-center "
                                    :name="`<span class='text-grey-7 ' >${item.user.nick}</span>`"
                                    :avatar="item.user.avatar"
                                    :sent="item.from == getUserInfo.userId"
                                    :bg-color="item.msgType !=0&&item.msgType!=2&&item.msgType !=6 ? 'grey-8':''"

                            >
                                <!--                      stamp="7 minutes ago"-->
                                <MsgContent :item="item"></MsgContent>
                                <template slot="avatar">
                                    <InfoSmall @atMemberFeedBack="atMember" :item="item" :get-user-info="getUserInfo"
                                               :booGroup="item.groupId ? true : false"/>
                                </template>
                            </q-chat-message>
                        </div>
                    </div>
                </q-item>
            </template>
        </q-virtual-scroll>
    </div>
</template>

<!-- <q-spinner-dots v-if="item.sending" size="2rem"/> 正在输入的代码-->
<script>
  import emoji from '../chatEmoji/emoji'
  import './msgbox.css'
  import MsgContent from './msgContent/index'
  import {mapGetters} from 'vuex'
  import InfoSmall from '../account/infoSmall'

  export default {
    name: 'MsgBox',
    // eslint-disable-next-line vue/no-unused-components
    components: {emoji, MsgContent, InfoSmall},
    props: {
      senderId: {},
      receiver: {},
      chatType: {}
    },
    data () {
      return {
        firstTime: true,
        listBodyStyle: {
          'max-height': ''
        }
      }
    },
    computed: {
      ...mapGetters({
        msg: 'onGetMsg',
        getUserInfo: 'onGetLoginInfo'
      })
    },
    created () {
      this.toSrcoll()
    },
    watch: {
      msg: function (val) {
        if (val) {
          this.toSrcoll()
        }
      }
    },
    mounted () {
      if (this.msg && this.firstTime) {
        this.toSrcoll()
        this.firstTime = false
      }
    },
    methods: {
      atMember (e) {
        this.$emit('atMemberFeedBack', e)
      },
      toSrcoll () {
        setTimeout(() => { // 設置一个定时保证拿到的数据为最新的数据
          const groupId = localStorage.getItem('chatGroupId')
          const historyMsg = localStorage.getItem('groupMsg' + groupId)
          if (historyMsg) {
            const hisList = JSON.parse(historyMsg)
            this.$refs.msgListRef.scrollTo(hisList.length)
          }
        }, 100) // 大概时间300ms
      }
    }
  }
</script>
<style lang="less" scoped>
    .listClass {
        max-height: calc(100vh - 220px);
    }

    ::-webkit-scrollbar { /*滚动条整体样式*/
        width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 0px;
    }

    .heAndWi {
        height: 100%;
        width: 100%;
    }


</style>
